<template>
	<div>
		<p class="title"><i></i>疫情地图</p>
		<Tabs :currentIndex="currentIndex" @onIndex="getIndex">
			<Tab index="1" label="国内疫情" style="margin-right:0px">
				<div id="chinamap"></div>
			</Tab>
			<Tab index="2" label="世界疫情" style="margin-right:0px">
				<div id="worldMap"></div>
			</Tab>
		</Tabs>
		
	</div>
</template>

<script>

import api from "../api"
import axios from "axios"

export default {
	data(){
		return{
			currentIndex:"1"
		}
	},
	mounted(){
		
		function nocvCity(){
			return axios.get("https://grnx.api.storeapi.net/api/94/219?format=json&appid=12395&sign=83feaadc1daa89cc73988af6f3fb9173")
		}

		function nocvaBroad(){
			return axios.get("http://api.tianapi.com/ncovabroad/index?key=75ec2a2f68c95935e305c3051b0a328a")
		}

		axios.all([nocvCity(),nocvaBroad()]).then(axios.spread((nocvCity,nocvaBroad)=>{
			//现在两个网络请求都完成了
			var allCity=[];
			for(let i = 0;i<nocvCity.data.retdata.length;i++){
				let temp={
					name:nocvCity.data.retdata[i].xArea,
					value:nocvCity.data.retdata[i].curConfirm,
				};
				allCity.push(temp);
			}

			let worlds = [];
			for(let j = 0;j<nocvaBroad.data.newslist.length;j++){
				let temp={
					name:nocvaBroad.data.newslist[j].provinceName,
					value:nocvaBroad.data.newslist[j].currentConfirmedCount
				}
				worlds.push(temp)
			}
			this.$charts.chinaMap("chinamap",allCity);
			this.$charts.worldMap("worldMap",worlds);
		}))
	},
	methods:{
		getIndex(index){
			this.currentIndex=index;
		}
	},
}
</script>

<style scoped>
	#chinamap{
		width: 100%;
		height: 24rem;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	#worldMap{
		width:25rem;
		height: 24rem;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	.title{
		border-top: 0.12rem solid #ebebeb;
		border-bottom: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		height: 2rem;
		padding: 0 1rem;
		font-weight: 500;
		font-size: 0.9rem;
		line-height: 0.8rem;
		background: #fff;
	}
	.title:before{
		content: "";
		background: #4169e2;
		width:.3rem;
		height:1.3rem;
		margin-right:.6rem;
	}
</style>
